<!DOCTYPE HTML>
<html>
<head>
<title>pixi.js example 15 - Filters</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #000000;
}
</style>
<script src="../../bin/pixi.dev.js"></script>
<script src="../../src/pixi/filters/DisplacementFilter.js"></script>
<script src="../../src/pixi/renderers/webgl/WebGLRenderGroup.js"></script>
<script src="../../src/pixi/renderers/webgl/PixiShader.js"></script>
<script src="../../src/pixi/renderers/webgl/WebGLShaders.js"></script>
<script src="../../src/pixi/renderers/webgl/filters/Filter.js"></script>
<script src="../../src/pixi/renderers/webgl/filters/FilterManager.js"></script>
<script src="../../src/pixi/filters/InvertFilter.js"></script>
<script src="../../src/pixi/filters/SepiaFilter.js"></script>
<script src="../../src/pixi/filters/BlurXFilter.js"></script>
<script src="../../src/pixi/filters/BlurFilter.js"></script>
<script src="../../src/pixi/filters/BlurYFilter.js"></script>
<script src="../../src/pixi/filters/SmartBlurFilter.js"></script>
<script src="../../src/pixi/filters/PixelateFilter.js"></script>
</head>
<body>
<script>
var renderer = PIXI.autoDetectRenderer(800, 600);
var f2 = new PIXI.BlurFilter()//new PIXI.Filter();
var f = new PIXI.GreyFilter()//new PIXI.Filter();
var blurX = new PIXI.BlurXFilter()//new PIXI.Filter();
var blurY = new PIXI.BlurYFilter();
var smart = new PIXI.PixelateFilter();
var blur = new PIXI.BlurFilter();
// create an new instance of a pixi stage
var stage = new PIXI.Stage(0xFFFFFF, true);
stage.interactive = true;
var bg = PIXI.Sprite.fromImage("BGrotate.jpg");
bg.anchor.x = 0.5;
bg.anchor.y = 0.5;
bg.position.x = 800/2;
bg.position.y = 600/2;
var colorMatrix = [1,0,0,0,
0,1,0,0,
0,0,1,0,
0,0,0,1];
var mapTexture = new PIXI.RenderTexture(800, 600);
var container = new PIXI.DisplayObjectContainer();
container.position.x = 800/2;
container.position.y = 600/2;
var bgFront = PIXI.Sprite.fromImage("SceneRotate.jpg");
bgFront.anchor.x = 0.5;
bgFront.anchor.y = 0.5;
bgFront.filters = [f2]//, blurY];
//smart
var filter = new PIXI.DisplacementFilter(PIXI.Texture.fromImage("SceneRotate.jpg"));
stage.addChild(bgFront);
bgFront.position.x = 800/2;
bgFront.position.y = 600/2;
bgFront.scale.y = 0.3;
var light2 = PIXI.Sprite.fromImage("LightRotate2.png");
light2.anchor.x = 0.5;
light2.anchor.y = 0.5;
container.addChild(light2);
var light1 = PIXI.Sprite.fromImage("LightRotate1.png");
light1.anchor.x = 0.5;
light1.anchor.y = 0.5;
container.addChild(light1);
var panda = PIXI.Sprite.fromImage("panda.png");
panda.anchor.x = 0.5;
panda.anchor.y = 0.5;
container.addChild(panda);
stage.addChild(container);
// create a renderer instance
renderer.view.style.position = "absolute"
//renderer.view.style.width = window.innerWidth + "px";
//renderer.view.style.height = window.innerHeight + "px";
renderer.view.style.display = "block";
// add render view to DOM
document.body.appendChild(renderer.view);
//container.filterArea = new PIXI.Rectangle(0,0,800, 600);
//container.filters = [smart]//f, f2];
//panda.filters = [f2];
panda.filters = [filter]//,f2]
var count = 0;
var switchy = false;
stage.click = stage.tap = function()
{
switchy = !switchy
if(!switchy)
{
container.filters = [smart];//
// container.filters = [filter]//,blurX, blurY];
}
else
{
container.filters = null//.. [filter];
// container.filters = null;
}
//PIXI.runList(stage);
}
/*
* Add a pixi Logo!
*/
var logo = PIXI.Sprite.fromImage("../../logo_small.png");
// stage.addChild(logo);
logo.anchor.x = 1;
logo.position.x = 620
logo.scale.x = logo.scale.y = 0.5;
logo.position.y = 320;
logo.interactive = true;
logo.buttonMode = true;
logo.click = logo.tap = function()
{
window.open("https://github.com/GoodBoyDigital/pixi.js", "_blank");
}
var help = new PIXI.Text("Click to turn filters on / off.", {font:"bold 12pt Arial", fill:"white"});
help.position.y = 600 - 20;
help.position.x = 10;
stage.addChild(help);
//stage.filters = [filter];
//stage.addChild(new PIXI.Sprite(mapTexture))
//PIXI.runList(stage);
requestAnimFrame(animate);
var position = new PIXI.Point(0, 0);
var pixelSize = new PIXI.Point(2,2);
smart.size = pixelSize;
function animate() {
mapTexture.render(panda, position, true);
// filter.scale.x = Math.sin(count) * 100;
//filter.scale.y = Math.cos(count) * 100;
panda.rotation += 0.01;
// bgFront.rotation -= 0.01;
light1.rotation += 0.02;
light2.rotation += 0.01;
panda.scale.x = 1+ Math.sin(count * 0.1) * 0.4;
panda.scale.y = (1 + Math.cos(count * 0.1) * 0.4) //* 0.2;
panda.position.x = count;
count += 0.1;
pixelSize.x = 20 + Math.sin(count * 0.1) * 20;
pixelSize.y = 20 + Math.sin(count * 0.1) * 20;
var val = 16;
f2.blur = 16// * val// 0.5 * 0.5//Math.sin(count) * 1/512//128// * 2;
bgFront.scale.y = 0.5 //+ Math.sin(count * 0.1) * 0.4;
bgFront.scale.x = 0.5 //+ Math.sin(count * 0.2) * 0.4;
// blurY.blur = Math.cos(count) * 1/128;
// filter.matrix = colorMatrix;
f.grey = Math.sin(count)
renderer.render(stage);
// f.renderTex();
// f.render();
requestAnimFrame( animate );
}
</script>
</body>
</html>
